<!DOCTYPE html>
<html style="background-color: #ccc;">
<head>
<meta charset="UTF-8">
  <link rel="stylesheet" href="/graph-benchmark/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="/graph-benchmark/layui/css/admin.css" media="all">
    <link rel="stylesheet" href="/graph-benchmark/layui/css/cascader.css" media="all">
<title>Insert title here</title>

</head>
<style>
.line1{
   
}


.line2{
    margin-left: 25px;
}

/* loading css start*/
  /* Toast */
    .ibox {clear:both;margin: 0px;padding: 0px;width:100%;}
    .ibox .ibox-content {clear: both;line-height: normal;padding:25px;}
    .web_transparent {position: fixed;z-index: 1000;top: 0;right: 0;left: 0;bottom: 0;}
    .web-toast {position: fixed;z-index: 5000;width: 16em;min-height: 4em;top: 365px;margin-left: 120px;background: rgba(40, 40, 40, 0.75);text-align: center;border-radius: 5px;color: #FFFFFF;} 
    .web-toast_content { font-size: 16px;}
    .sk-spinner-three-bounce.sk-spinner{margin: 20px auto 10px;text-align: center; }
    .sk-spinner-three-bounce div {width: 18px;height: 18px;background-color: #f6296d;border-radius: 100%;display: inline-block;-webkit-animation: sk-threeBounceDelay 1.4s infinite ease-in-out;animation: sk-threeBounceDelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
    .sk-spinner-three-bounce .sk-bounce1 {-webkit-animation-delay: -.32s;animation-delay: -.32s;}
    .sk-spinner-three-bounce .sk-bounce2 {-webkit-animation-delay: -.16s;animation-delay: -.16s;}
    @-webkit-keyframes sk-threeBounceDelay {
        0%,100%,80% {-webkit-transform: scale(0);transform: scale(0);}
        40% {-webkit-transform: scale(1);transform: scale(1);}
    }
    @keyframes sk-threeBounceDelay {
    0%,100%,80% {-webkit-transform: scale(0);transform: scale(0);}
    40% {-webkit-transform: scale(1);transform: scale(1);}
    }
    /*spinner*/
    .pinkspin{color:#ef1a60;}
    .greenspin{color:#07b30b;}
.layui-form-label {
    float: left;
    display: block;
    padding: 9px 15px;
    width: 80px;
    font-weight: 400;
    line-height: 20px;
    text-align: right;
    }   
 .layui-input-block1 {
    margin-left: 110px;
    min-height: 36px;
    margin-top:20px;  
    } 
     /* loading css end*/
</style>

<body bgcolor="#fff">
	<div style="text-align: center;background:#fff;margin:0 0 20px;">
	<h2 style="padding-top:10px">图数据库系统性能测试</h2>
	</div>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>测试介绍</legend>
</fieldset> 		
   <div id="instru" style="width: ;height:; margin-top: 20px;margin-left:120px;;background:#fff;">
    <h4 class="line1">测试环境</h4>
    <h5 class="line2">Linux，图数据库</h5>
    <h4 class="line1">测试数据</h4>
    <h5 class="line2">由模拟工业真实的BOM数据生产的数据，详情见【图数据展示】模块</h5>
    <h4 class="line1">测试负载</h4>
    <h5 class="line2">生成从某 一节点的所有结构(generate_structure)、查询节点的使用情况(where_used)、 比较两个结构的差异(structure_diff)、结构聚合和统计(structure_aggr)。</h5>
    <h5 class="line2">Q1:where_used":生成从某一节点的所有结构, 即通过某一节点开始进行深度遍历，输出所有路径</h5>
    <h5 class="line2">Q2:generate_structure":查询节点的使用情况, 即输出某个节点的所有父亲节点</h5>
    <h5 class="line2">Q3:structure_diff":比较两个结构的差异,即比较两个子树的差异，也是深度遍历出所有结构再通过笛卡尔积进行比较</h5>
    <h5 class="line2">Q4~7:struct_aggr":结构聚合和统计,即计算子树上所有节点的某一个参数的和</h5>
    </div>
    
    <!--  
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>目标图数据库</legend>
</fieldset> 

<div style="margin-left:120px;"><table class="layui-hide"  id="test"></table></div>
<form class="layui-form" action="" lay-filter="form_config" id="generateid" style="margin-top:50px ;">
  <div  style=" display: block; margin-left:100px;margin-top:10px;width:980px;font-weight: 400;line-height: 20px;text-align: right;">
    <label class="layui-form-label" style="float:left ;">dbName</label>
      <input type="text" name="dbName" placeholder="数据库名" autocomplete="off" style="width: 150px;float:left;" class="layui-input">
    
     <label class="layui-form-label" style="float:left ;">dbTpye</label>
      <input type="text" name="dbType" placeholder="数据库类型(如Neo4j)" autocomplete="off" style="width: 150px;float:left;" class="layui-input">
    
    
     <label class="layui-form-label" style="float:left;">dbPath</label>
      <input type="text" name="dbPath" placeholder="安装目录" autocomplete="off" style="width: 250px;float:left;"  class="layui-input">
      
       <button class="layui-btn" lay-submit=""  lay-filter="submit_conf" style="background-color:#3c8dbc;;margin-left:20px;">添加数据库</button>
  </div>
</form>
-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>图数据库测试</legend>
</fieldset> 

 <div style=";margin-top: ;margin-left:130px;">
    <div style=";margin-top: 10px;margin-left:10px;">
    		<div class="layui-form-item" style="margin-top:10px;margin-left:-50px;">
	        <label class="layui-form-label" >选择图</label>
	        <div class="layui-input-block" >
	            <input type="text" id="graphList" class="layui-input" placeholder="请选择要测试的图数据集" readonly="readonly">
	        </div>
    		</div>
    		<div class="layui-form-item" style="margin-top:10px;">
	        <label class="layui-form-label" style="width:100px;">选择数据库</label>
	        <div class="layui-input-block" >
	            <input type="text" id="dbList" class="layui-input" placeholder="请选择要测试的图数据库" readonly="readonly">
	        </div>
    		</div>
    		 <div >导入测试进度 </div>
    		<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
		<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
		</div>
		
    		<div id="main" style="width: 600px;height:400px;margin-top: 100px; "></div>
    </div>
</div>
<script type="text/javascript" src="/graph-benchmark/views/js/jquery.js"></script>
<script type="text/javascript" src="/graph-benchmark/views/js/echarts.min.js"></script>
<script type="text/javascript" src="/graph-benchmark/views/js/loading.js"></script> 
<script src="/graph-benchmark/layui/layui.js" charset="utf-8"></script>

<script>
    layui.config({
        base: "/graph-benchmark/lay/modules/"
    }).use(['form',"jquery","cascader","element","table"], function(){
        var $ = layui.jquery
        ,element = layui.element; 
        var form = layui.form;
        var datas = [];
        var datas2 = [];
        var datasetName;
        var dbName;
        var table = layui.table;
        
        table.render({
            elem: '#test'
            ,url:'highEchart/getDatabaseList'
            ,width: 900 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
              {field:'dbName', width:100, title: '数据库名'}
              ,{field:'dbType', width:100, title: '数据库类型'}
              ,{field:'dbPath', width:700, title: '安装路径'}
            ]]
          });
        
       

        //监听提交
      //  form.on('submit(submit_conf)', function(data){
      	/*  {"volume":"1000","nodetype":"1","edgetype":"1","querysize":"1","graphsize":"local"} */ 
   //   	Init.WebToast("数据库添加中...");
      	//console.log(data)
  //    	 $.ajax({
    //  	    url: 'http://localhost:8080/graph-benchmark/highEchart/addDatabase',
    //  	    data: {dbName:data.field.dbName,dbType:data.field.dbType,dbPath:data.field.dbPath},
   //   	    success: function(data) {
      	    	//停止加载框
 //     		Init.ClearToast("#webToast", 1)
      	 //   	console.log(data)
      	  //  	var points = JSON.parse(point.value)
 //     	    },
 //     	    cache: false
//      	  });
  //        return false;
  //      });
        
        
        
        //----
      	$.ajax({
         url: 'highEchart/getContentList',
         success: function(redata) {
     		//document.getElementById("edge").innerHTML = data2.length-1;
     		//console.log(redata.length)
     		for (var k = 0; k < redata.length-1; k++){
     			var ele = {}
     			console.log(redata[k].split("&")[1] +"("+redata[k].split("&")[0]+")")
     			ele.value = redata[k].split("&")[1]
     			ele.label = redata[k].split("&")[1] +"("+redata[k].split("&")[0]+")"
     			datas.push(ele)
     		}
     	//	console.log(datas)
     		 var cascader = layui.cascader;
     	     cascader({
     	     	     elem:"#graphList",
	     	         data: datas,
	     	         success: function (valData,labelData) {
	     	        		datasetName = valData;
	     	       //     console.log(valData);
	     	         //   console.log(labelData);
	     	        
	     	           // testPerformance(valData)
	     	             //console.log("kkk")
	     	         }
     	     });
         },
         cache: false
       });
      //----
      
      $.ajax({
         url: 'highEchart/getDatabase',
         success: function(redata) {
     		//document.getElementById("edge").innerHTML = data2.length-1;
     		console.log(redata)
     		for (var k = 0; k < redata.length; k++){
     			var ele = {}
     			ele.value = redata[k].split(",")[2]
     			ele.label = redata[k].split(",")[0]
     			datas2.push(ele)
     		}
     	//	console.log(datas2)
     		 var cascader = layui.cascader;
     	     cascader({
     	     	     elem:"#dbList",
	     	         data: datas2,
	     	         success: function (valData,labelData) {
	     	    //        console.log(valData);
	     	    //        console.log(labelData);
	     	            dbName=valData;
	     	             //console.log("kkk")
						
	     	            testPerformance(element,datasetName,dbName)
	     	          
	     	             //进度 end
	     	             
	     	             
	     	         }
     	     });
         },
         cache: false
       });
      //----
        
   
      
      
      
        
    });
</script>

<script type="text/javascript">

var chart = null; // 定义全局变量
$(document).ready(function() {
  	//testPerformance()
});
 

function testPerformance(ele,dsName,dbName) {
	Init.WebToast("InGraphDB性能测试中...");
	 //进度条
     var n = 0, timer = setInterval(function(){
       n = n + Math.random()*10|0;  
       if(n>=90){
         n = 90;
       }
       ele.progress('demo', n+'%');
     }, 200);
	 
	$.ajax({
		url: 'highEchart/testPerformance',
		 data: {graphName:escape(dsName),dbPath:escape(dbName)},
		cache: false,
		success: function(point) {
			//| 'QueryExecution' |
		  	console.log(point)
		  	 var per = []
			var t1,t2,t3,t4,t5
			var str
		  	for(var i=0;i<point.length;i++){
		  		if(point[i]=="'t1:' + timestamp()"){
		  			//debugger
		  			str = point[i+1]
		  			t1 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  			console.log("t1:"+t1)
		  		}
		  		else if(point[i]=="'t2:' + timestamp()"){
		  			str = point[i+1]
		  			t2 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  		}
		  		else if(point[i]=="'t3:' + timestamp()"){
		  			str = point[i+1]
		  			t3 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  		}
		  		else if(point[i]=="'t4:' + timestamp()"){
		  			str = point[i+1]
		  			t4 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  		}
		  		else if(point[i]=="'t5:' + timestamp()"){
		  			str = point[i+1]
		  			t5 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  		}
		  	}
		  	per.push(t2-t1)
	  		per.push(t3-t2)
	  		per.push(t4-t3)
	  		per.push((t5-t4)/4)
		//	console.log(per) 
		
			//-----------绘图开始-------
				// 基于准备好的dom，初始化echarts实例
		        var myChart = echarts.init(document.getElementById('main'));

		        // 指定图表的配置项和数据
		        var option = {
		            title: {
		                text: '图数据库查询测试性能', //标题居中
		                left:'center'
		            },
		            tooltip: {},
		            legend: {
		                data:['InGraphDB(ms)'],
		                x:'right'//图例靠右
		            },
		            xAxis: {
		                data: ["Q1","Q2","Q3","Q4","Q5","Q6","Q7"],
		            	name:'查询负载'//x轴名称
		            },
		            yAxis: {
		            	name:'ms'//y轴名称
		            },
		            series: [
		            	{
		                name: 'InGraphDB(ms)',
		                type: 'bar',
		               // data: [5,7,8,9,7,5,4]
		                data: per
		            }
		            	]
		        };
		    	//停止加载框
		    	   
				Init.ClearToast("#webToast", 1)
				n=100;
		   		ele.progress('demo', n+'%');
		   	    clearInterval(timer);
		        // 使用刚指定的配置项和数据显示图表。
		        myChart.setOption(option);
		      //-----------绘图结束-------
		
		  },
	});
}
 
 
 
function testPerformance2(ele,dsName,dbName) {
	Init.WebToast("InGraphDB性能测试中...");
	 //进度条
     var n = 0, timer = setInterval(function(){
       n = n + Math.random()*10|0;  
       if(n>=90){
         n = 90;
       }
       ele.progress('demo', n+'%');
     }, 200);
	 
	$.ajax({
		url: 'highEchart/testPerformance',
		 data: {graphName:escape(dsName),dbPath:escape(dbName)},
		cache: false,
		success: function(point) {
			//| 'QueryExecution' |
		  	console.log(point)
		  	 var per = []
			var t1,t2,t3,t4,t5
			var str
		  	for(var i=0;i<point.length;i++){
		  		if(point[i]=="'t1:' + timestamp()"){
		  			//debugger
		  			str = point[i+1]
		  			t1 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  			console.log("t1:"+t1)
		  		}
		  		else if(point[i]=="'t2:' + timestamp()"){
		  			str = point[i+1]
		  			t2 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  		}
		  		else if(point[i]=="'t3:' + timestamp()"){
		  			str = point[i+1]
		  			t3 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  		}
		  		else if(point[i]=="'t4:' + timestamp()"){
		  			str = point[i+1]
		  			t4 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  		}
		  		else if(point[i]=="'t5:' + timestamp()"){
		  			str = point[i+1]
		  			t5 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  		}
		  	}
		  	per.push(t2-t1)
	  		per.push(t3-t2)
	  		per.push(t4-t3)
	  		per.push((t5-t4)/4)
		//	console.log(per) 
		
		//oracle start
			$.ajax({
			url: 'highEchart/testPerformanceOracle',
			 data: {graphName:escape(dsName),dbPath:escape(dbName)},
			cache: false,
			success: function(point2) {
				console.log(point2)
				
				//-----------绘图开始-------
				// 基于准备好的dom，初始化echarts实例
		        var myChart = echarts.init(document.getElementById('main'));

		        // 指定图表的配置项和数据
		        var option = {
		            title: {
		                text: '图数据库查询测试性能', //标题居中
		                left:'center'
		            },
		            tooltip: {},
		            legend: {
		                data:['Neo4j(ms)','Oracle(ms)'],
		                x:'right'//图例靠右
		            },
		            xAxis: {
		                data: ["Q1","Q2","Q3","Q4","Q5","Q6","Q7"],
		            	name:'查询负载'//x轴名称
		            },
		            yAxis: {
		            	name:'ms'//y轴名称
		            },
		            series: [
		            	{
		                name: 'Neo4j(ms)',
		                type: 'bar',
		               // data: [5,7,8,9,7,5,4]
		                data: per
		            },
		        		{
		                name: 'Oracle(ms)',
		                type: 'bar',
		               // data: [5,7,8,9,7,5,4]
		                data: point2
		            }
		            	]
		        };
		    	//停止加载框
		    	   
				Init.ClearToast("#webToast", 1)
				n=100;
		   		ele.progress('demo', n+'%');
		   	    clearInterval(timer);
		        // 使用刚指定的配置项和数据显示图表。
		        myChart.setOption(option);
		      //-----------绘图结束-------
			 },
			});
	   //oracle end
		
		  },
	});
}

</script>

</body>
</html>